<script>
import thumbsUpIcon from "../assets/thumbs_up.png"
import { handleUrlParams } from "@/utils"
import closeIcon from "../assets/close_line.png"

export default {
  name: "inputInformationPrompt",
  data() {
    return {
      thumbsUpIcon,
      closeIcon,
    }
  },
  props: {
    details: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  methods: {
    handleUrlParams,
    open() {
      this.$refs.popup.open()
    },
  },
	emits: ["join-work-study-program"],
}
</script>

<template>
  <uni-popup ref="popup" type="center">
    <view class="popup-content">
      <view class="message"> 该兼职为助学岗位，仅提供给各大高校学生。如需报名，请先加入校务行勤工助学团队。 </view>
      <!--		我要加入勤工俭学-->
      <view
        class="join-work-study-program"
        @click="
          () => {
            $uni.navigateTo({
              url: handleUrlParams('/markingCampaign/pages/dailyNews/partTimeJobRecruit/workStudyProgram/introduce', {
                sourceLocation: `${details.recruitmentTitle} - 详情页`,
                navigateBackAfterSubmit: 'true',
              }),
            })
            $refs.popup.close()
            $emit('join-work-study-program')
          }
        "
      >
        <view class="icon-placeholder"></view>
        <image class="icon" :src="thumbsUpIcon" mode="widthFix"></image>
        <view class="title">我要加入勤工俭学</view>
        <view class="join-btn">加入</view>
      </view>

      <image
        :src="closeIcon"
        class="close-icon"
        @click.stop="
          () => {
            $refs.popup.close()
          }
        "
      ></image>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.popup-content {
  background: white;
  border-radius: 40rpx;
  padding-bottom: 30rpx;
  width: 700rpx;
  position: relative;
  > .message {
    padding: {
      top: 60rpx;
      left: 60rpx;
      right: 60rpx;
      bottom: 60rpx;
    }
    font-size: 32rpx;
    font-weight: 500;
    line-height: 1.5;
  }
  > .join-work-study-program {
    margin: {
      left: 40rpx;
      right: 40rpx;
      top: 60rpx;
    }
    display: flex;
    align-items: center;
    background: #f3991f;
    box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.16);
    padding: 10rpx;
    position: relative;
    border-radius: 45rpx;
    transform: translateY(-45rpx);
    > .icon-placeholder {
      width: 200rpx;
    }
    > .icon {
      position: absolute;
      bottom: 0;
      left: 14rpx;
      width: 200rpx;
      height: 146.66rpx;
    }
    > .title {
      width: 0;
      flex: 1;
      font-size: 32rpx;
      color: white;
      text-align: center;
    }
    > .join-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100rpx;
      height: 70rpx;
      font-size: 30rpx;
      background: white;
      border-radius: 35rpx;
    }
  }
  > .close-icon {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -100rpx;
    width: 60rpx;
    height: 60rpx;
  }
}
</style>
